<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title> 
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../../amcharts/javascript/amcharts.js" type="text/javascript"></script>
        <script src="../../amcharts/javascript/raphael.js" type="text/javascript"></script>        
	    
        <script type="text/javascript">

		var chart;

		var chartData = [];

		// generate some random data
		function generateChartData(){
			var firstDate = new Date();
			firstDate.setDate(firstDate.getDate() - 15);

			for(var i = 0; i < 15; i++){
				var newDate = new Date(firstDate);
				newDate.setDate(newDate.getDate() + i);

				var visits = Math.round(Math.random() * 40) + 100;

				chartData.push({date:newDate, visits:visits});
			}
		}


        window.onload = function() {

			generateChartData();

			chart = new AmCharts.AmSerialChart();
   			chart.pathToImages = "../../amcharts/javascript/images/";
			chart.marginLeft = 0;
			chart.marginRight = 0;
			chart.marginTop = 0;
			chart.marginTop = 0;
			chart.dataProvider = chartData;

			chart.categoryField = "date";
			chart.categoryAxis.parseDates = true;
			chart.categoryAxis.autoGridCount = true;
			chart.categoryAxis.minPeriod = "DD";

			var valAxis = new AmCharts.ValueAxis();
			valAxis.inside = true;
			valAxis.tickLength = 0;
			valAxis.axisAlpha = 0;
			valAxis.minimum = 100;
			valAxis.maximum = 140;
			chart.addValueAxis(valAxis);

			var graph = new AmCharts.AmGraph();
			graph.dashLength = 3;
			graph.lineColor = "#7717D7";
			graph.valueField = "visits";
			graph.dashLength = 3;
			graph.bullet = "round";
			chart.addGraph(graph);

			var chartCursor = new AmCharts.ChartCursor();
			chartCursor.cursorAlpha = 0;
			chart.addChartCursor(chartCursor);

			var chartScrollbar = new AmCharts.ChartScrollbar();
			chartScrollbar.graph = graph;
			chart.addChartScrollbar(chartScrollbar);


			// VERTICAL GUIDE

			// create guide and add it to category axis
			var verticalGuideDate = new Date();
			verticalGuideDate.setHours(0,0,0,0);
			verticalGuideDate.setDate(verticalGuideDate.getDate() - 7);

			var verticalGuideToDate = new Date();
			verticalGuideToDate.setHours(0,0,0,0);
			verticalGuideToDate.setDate(verticalGuideToDate.getDate() - 5);

			var guide = {};
			guide.date = verticalGuideDate;
			guide.toDate = verticalGuideToDate;
			guide.fillAlpha = 0.15;
			guide.lineAlpha = 0;
			chart.categoryAxis.addGuide(guide);

			// HORIZONTAL GUIDES
			var guide = {};
			guide.value = 0;
			guide.toValue = 105;
			guide.fillColor = "#CC0000";
			guide.fillAlpha = 0.2;
			guide.lineAlpha = 0;
			valAxis.addGuide(guide);

			var guide = {};
			guide.value = 105;
			guide.toValue = 110;
			guide.fillColor = "#CC0000";
			guide.fillAlpha = 0.15;
			guide.lineAlpha = 0;
			valAxis.addGuide(guide);

			var guide = {};
			guide.value = 110;
			guide.toValue = 115;
			guide.fillColor = "#CC0000";
			guide.fillAlpha = 0.1;
			guide.lineAlpha = 0;
			valAxis.addGuide(guide);

			var guide = {};
			guide.value = 115;
			guide.toValue = 120;
			guide.fillColor = "#CC0000";
			guide.fillAlpha = 0.05;
			guide.lineAlpha = 0;
			valAxis.addGuide(guide);

			var guide = {};
			guide.value = 120;
			guide.toValue = 125;
			guide.fillColor = "#0000cc";
			guide.fillAlpha = 0.05;
			guide.lineAlpha = 0;
			valAxis.addGuide(guide);

			var guide = {};
			guide.value = 125;
			guide.toValue = 130;
			guide.fillColor = "#0000cc";
			guide.fillAlpha = 0.1;
			guide.lineAlpha = 0;
			valAxis.addGuide(guide);

			var guide = {};
			guide.value = 130;
			guide.toValue = 135;
			guide.fillColor = "#0000cc";
			guide.fillAlpha = 0.15;
			guide.lineAlpha = 0;
			valAxis.addGuide(guide);

			var guide = {};
			guide.value = 135;
			guide.toValue = 140;
			guide.fillColor = "#0000cc";
			guide.fillAlpha = 0.2;
			guide.lineAlpha = 0;
			valAxis.addGuide(guide);

			chart.write("chartdiv");
		}


	    </script>

    </head>

	<body>
		<div id="chartdiv" style="width: 100%; height: 400px;"></div>
	</body>
</html>
